<template>
  <div class="all">
    <el-container class="home-container">
      <el-header class="home-header">
        <h3 class="home_title">进销存管理系统</h3>
        <!-- <h3>POWERD BY com.sizu</h3> -->
        <div>
          <el-dropdown @command="handleCommand" style="margin-top:15px;margin-right:30px;">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <h3 style="margin-right: 30px;color:red;margin-top:-5px;">{{this.username}}</h3>
        </div>
      </el-header>

      <el-container>
        <el-aside width="200px" class="home-aside">
          <!-- <h1 style="font-size:25px;color:#4FC1B0;"><i class="el-icon-s-platform">进销存首页</i></h1> -->
          <div>
            <el-menu router @select="menuselect" unique-opened>
              <!--一级菜单循环开始-->
              <el-submenu
                style="text-align:left;"
                :index="item.path"
                :key="index"
                v-for=" (item,index) in this.$router.options.routes[1].children"
              >
                <template slot="title">
                  <i :class="item.icon"></i>
                  {{item.name}}
                </template>
                <!--二级菜单循环开始-->
                <el-menu-item-group>
                  <el-menu-item
                    style="text-align:left;"
                    :index="sub.path"
                    :key="num"
                    v-for="(sub,num) in item.children"
                  >
                    <i :class="sub.icon"></i>
                    {{sub.name}}
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </div>
        </el-aside>

        <el-main>
          <el-tabs
            v-model="editableTabsValue"
            type="card"
            @tab-click="tabclick"
            @tab-remove="tabremove"
          >
            <el-tab-pane
              :key="index"
              v-for="(item,index) in editableTabs"
              :label="item.name"
              :name="item.path"
              :closable="item.flag"
            ></el-tab-pane>
          </el-tabs>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      editableTabsValue: "",
      editableTabs: [
        {
          path: "/home/nowstock",
          name: "首页",
          flag: false
        }
      ]
    };
  },
  mounted() {
    console.log(
      "home页面加载....this.$router.options.routes[1].children---->",
      this.$router.options.routes[1].children
    );
    this.username = localStorage.getItem("username");
    this.getUserId();
  },
  methods: {
    getUserId() {
      this.axios({
        method: "get",
        url: this.requestUrl + "user/user/tUser/list",
        params: {
          access_token: localStorage.getItem("access_token"),
          userName: localStorage.getItem("username")
        }
      }).then(res => {
        console.log("根据用户名称返回的用户信息", res);
        localStorage.setItem("userId", res.data.obj[0].id);
      });
    },
    tabremove(tab) {
      for (var i in this.editableTabs) {
        if (this.editableTabs[i].path == tab) {
          this.editableTabs.splice(i, 1);
          this.editableTabsValue = this.editableTabs[i - 1].path;

          this.$router.push(this.editableTabsValue);
          break;
        }
      }
    },
    tabclick(tab) {
      console.log("选中的tab标签信息", tab);
      this.$router.push(this.editableTabsValue);
    },
    menuselect(index, indexpath) {
      var flag = true;
      if (this.editableTabs.length > 1) {
        for (var i in this.editableTabs) {
          if (this.editableTabs[i].path == index) {
            this.editableTabsValue = index;
            flag = false;
            break;
          }
        }
      }
      if (flag) {
        this.axios({
          method: "get",
          url: this.requestUrl + "user/user/menu/list",
          params: {
            path: index,
            access_token: localStorage.getItem("access_token")
          }
        }).then(res => {
          console.log("根据id获取的菜单", res.data.obj);

          this.editableTabs.push({
            name: res.data.obj[0].label,
            path: index,
            flag: true
          });
          this.editableTabsValue = index;
        });
      }
    },
    handleCommand(command) {
      var $this = this;
      $this
        .axios({
          method: "get",
          url: this.requestUrl + "oauth/admin/token/logout",
          params: { access_token: localStorage.getItem("access_token") }
        })
        .then(function(res) {
          $this.$message(res.data.msg);
          if (res.data.code == 200) {
            $this.$router.replace({ path: "/" });
          }
        });
    }
  }
};
</script>

<style>
.el-menu-item.is-active {
  background: -webkit-linear-gradient(
      bottom,
      hsla(198, 100%, 40%, 0.15),
      hsla(168, 100%, 17%, 0)
    )
    no-repeat !important;
}
.home-container {
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}
.all {
  background: -webkit-linear-gradient(
      bottom,
      hsla(198, 10%, 80%, 0.15),
      hsla(168, 2%, 59%, 0),
      white
    )
    no-repeat;
}
.home-header {
  background: -webkit-linear-gradient(
      bottom,
      hsla(202, 52%, 39%, 0.15),
      hsla(167, 51%, 45%, 0),
      white
    )
    no-repeat;
  color: #333;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: content-box;
  padding: 0px;
}
.home_title {
  color: #1a1a1a;
  display: inline;
  margin-left: 8px;
  font-size: 20px;
  background-image: linear-gradient(135deg, red, blue);
  -webkit-background-clip: text;
  color: transparent;
}
.home-aside {
  background: -webkit-linear-gradient(
      bottom,
      hsla(256, 96%, 41%, 0.15),
      hsla(102, 61%, 12%, 0),
      white
    )
    no-repeat;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #ffffff;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #ffffff;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.el-main {
  height: 650px;
}
</style>